<template>
	<view class="login-content">
		<top-set></top-set>
		<view class="box">
			<!-- 图标 -->
			<view class="top-img-box">
				<image src="/static/login/lg-top.png" mode=""></image>
			</view>
			<view class="title1">
				欢迎来到客栈帮手
			</view>
			<view class="title1-b">
				新用户验证手机后自动注册
			</view>
			<!-- 账号 -->
			<view class="uni-form-item uni-column form-box">
				<view class="title">
					<image src="/static/login/iphone.png" mode=""></image>
				</view>
				<input class="uni-input" type="number" v-model="phone" placeholder-class="place-holder" 
				 placeholder="请输入手机号码" />
				<view v-if="loginType == 'verb'" @tap="getVerb()" class="verb" :class="[getCode?'verb_b':'']">{{verbTitle}}</view>
			</view>
			<!-- 输入验证码 -->
			<view class="uni-form-item uni-column form-box form2" v-if="loginType == 'verb'">
				<view class="title">
					<image src="/static/login/verb.png" mode=""></image>
				</view>
				<input class="uni-input" v-model="verbText"  type="number" placeholder="请输入验证码" />
			</view>
			<!-- 输入密码 -->
			<view class="uni-form-item uni-column form-box form2" v-if="loginType == 'pass'">
				<view class="title">
					<image src="/static/login/password.png" mode=""></image>
				</view>
				<input v-if="!passVisible" class="uni-input" v-model="passText" type="text" placeholder="请输入密码" />
				<input v-if="passVisible" class="uni-input" v-model="passText" password type="password" placeholder="请输入密码" />

				<view :class="[passVisible?'pass-icon-v':'pass-icon']" @tap="changePassVisible()">
					<image :src="passVisible?'/static/login/visual.png':'/static/login/invisible.png'" mode=""></image>
				</view>
			</view>
			<!-- 切换密码登录 -->
			<view class="login-type uni-clearfix" v-if="loginType == 'verb'">
				<view class="pass" @tap="changeLoginType('pass')">密码登录</view>
			</view>
			<!--  切换验证码登陆-->
			<view class="login-type uni-clearfix" v-if="loginType == 'pass'">
				<view class="pass" @tap="changeLoginType('verb')">验证码登录</view>
				<view class="w_pass" @tap="forgetPass()">忘记密码</view>
			</view>
			<!-- 登录按钮 -->
			<view class="uni-padding-wrap uni-common-mt">
				<button type="primary" @tap="loginBtn()">登录</button>
			</view>
			<!-- 用户协议 -->
			<view class="user_agr">
				<text class="agr1">点击“登录”即表示同意</text>
				<text class="agr2" @tap="userAgr()">客栈帮手用户协议</text>
			</view>
			<!-- 第三方登录 -->
			<view class="t_p_login">
				<view class="t_p_text">使用第三方登录</view>
				<view class="t_p_img" @tap="wxLogin()">
					<image src="/static/login/wxlogin.png" mode=""></image>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import "@/common/css/login.scss";
	let CryptoJS = require("crypto-js");
	let flag = false; //重复点击开关  
	let back = true;
	export default {
		data() {
			return {
				loginType: 'verb', //pass(密码登录) verb(验证码登陆)
				passVisible: true, //密码可见
				verbText: '',
				passText: '',
				phone: '',
				getCode: false,
				verbTitle: '获取验证码'
			}
		},
		onLoad() {

		},
		onBackPress() {
			if (uni.getSystemInfoSync().brand == 'iPhone') {
				back = false;
			} else {
				return back;
			}
		},
		components: {

		},
		computed: {},
		methods: {
			changeLoginType(type) {
				this.loginType = type;
			},
			/**
			 * 验证非小数
			 */
			decimal(val) {

				if (val == 'phone')    this.phone    = this.screenedDecimal(this.phone);
				console.log(this.phone);
				if (val == 'passText') this.passText = this.screenedDecimal(this.passText);


			},
			changePassVisible() {
				this.passVisible = !this.passVisible;
			},
			/**
			 * 加密
			 */
			aes_encrypt(plainText) {
				const AES_KEY = "qq3217834abcdefg"; //16位
				const AES_IV = "1234567890123456"; //16位
				var encrypted = CryptoJS.AES.encrypt(plainText, CryptoJS.enc.Utf8.parse(AES_KEY), {
					iv: CryptoJS.enc.Utf8.parse(AES_IV)
				});
				return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
			},
			loginBtn() {
				/**
				 * 跳转登录
				 */
				if (flag) {
					return;
				}
				flag = true;
				if( !this.regularVerification('phone',this.phone)){
					uni.showToast({
						icon:"none",
						title:"请填写正确的手机号码"
					})
					flag = false;
					return;
				}
				uni.showLoading({
					title: '正在登陆'
				});
				if (this.loginType == 'verb') {
					/**
					 * 验证码登陆
					 */
					this.req({
							url: 'user/login',
							data: {
								phone: this.phone,
								verificationCode: this.verbText,
								key: "login"
							}
						},
						(res) => {
							uni.hideLoading();
							flag = false;
							if (res.data.data.son_status == 1001) {
								uni.navigateTo({
									url: '/pages/login/set-pass?phone=' + this.phone + '&verb=' + this.verbText
								});
								return;
							}
							if (res.data.status == 1) {
								console.log(res);

								this.afterLogin(res.data.data);

								if (res.data.data.type == 0) {
									uni.navigateTo({
										url: '/pages/identity/iden-selection?uid=' + res.data.data.id
									});
								} else {
									back = false;
									uni.navigateBack({
										delta: 10
									});
								}


							} else {
								uni.showToast({
									title: res.data.message,
								});
							}
							console.log(res);
							

						},
						(res) => {

							uni.hideLoading();
							flag = false;

						}
					);
				} else {
					/**
					 * 密码登陆
					 */
					console.log(this.phone);
					this.req({
						url: 'user/accountLogin',
						data: {
							phone: this.phone,
							password: this.aes_encrypt(this.passText)
						}
					}, (res) => {
						flag = false;
						if (res.data.status == 1) {
							this.afterLogin(res.data.data);
							if (res.data.data.type == 0) {
								uni.navigateTo({
									url: '/pages/identity/iden-selection?uid=' + res.data.data.id
								});
							} else {
								back = false;
								uni.navigateBack({
									delta: 10
								});
							}


						} else {
							console.log(111114)
							//console.log(res)
							uni.showToast({
								title: res.data.message,
							});
						}
						uni.hideLoading();
						
					}, (res) => {
						uni.hideLoading();
						flag = false;
					});

				}
			},
			/**
			 *  微信登录
			 */
			wxLogin() {
				
				uni.showLoading();
				uni.login({
					provider: 'weixin',
					success: (result) => {
						console.log(JSON.stringify(result));
						// 更新保存在 store 中的登录状态
						this.wxIsLoign({
							openId: result.authResult.openid

						});

					},
					fail: (err) => {
						uni.hideLoading();
						console.log('login fail:', err);
					}
				});
			},
			/**
			 * 确认微信登录信息
			 */
			wxIsLoign(obj) {
				console.log(obj);
				this.req({
						url: "user/wxlogin",
						data: obj
					},
					(res) => {
						console.log(JSON.stringify(res));

						if (res.data.status == 0) {
							uni.navigateTo({
								url: '/pages/login/bind-phone?openId=' + obj.openId
							});
						} else {
							this.afterLogin(res.data.data);
							if (res.data.data.type == 0) {
								uni.navigateTo({
									url: '/pages/identity/iden-selection?uid=' + res.data.data.id
								});
							} else {
								back = false;
								uni.navigateBack({
									delta: 10
								});
							}

						}
						uni.hideLoading();
					},
					(res) => {
						uni.hideLoading();
					}
				)
			},
			forgetPass() {
				/**
				 * 忘记密码
				 */
				uni.navigateTo({
					url: '/pages/login/forget-pass'
				});
			},
			userAgr() {
				/**
				 * 用户协议
				 */
				uni.navigateTo({
					url: '/pages/login/user-agreement'
				});
			},
			/**
			 * 获取验证码
			 */
			getVerb() {
				if (this.getCode) {
					return;
				}
				if( !this.regularVerification('phone',this.phone)){
					uni.showToast({
						icon:"none",
						title:"请填写正确的手机号码"
					})
					return;
				}
				this.req({
						url: 'api/sendSms',
						method: 'get',
						data: {
							key: 'login',
							phone: this.phone
						}
					},
					(res) => {
						if (res.data.status == 1) {
							this.getCode = true;
							let second = 59;
							this.verbTitle = second + 's';

							let timer = setInterval(() => {

								second--;
								this.verbTitle = second + 's';


								if (second <= 0) {
									this.getCode = false;
									this.verbTitle = '获取验证码';
									clearInterval(timer);
								}

							}, 1000);


						}

					},
					(res) => {

					});
			}
		}
	}
</script>

<style lang="scss">
	.login-content {
		box-sizing: border-box;
		width: 100%;
		height: 100vh;
		padding: 112upx 102upx 73upx 102upx;
	}

	.verb_b {
		color: #999999 !important;
	}
</style>
